$(function () {
    local()
    //所选商品('购物车使用')
    let good = JSON.parse(localStorage.getItem('goodUpdate')) || {}
    //初始化页面
    initGood(good)

})
function initGood(good) {
    let str = `
            <li class="mui-table-view-cell">
                <div class="mui-slider">

                <div class="mui-slider-group mui-slider-loop">
                            <div class="mui-slider-group mui-slider-loop">  
                                ${upPic(good.pic)}
                            </div>
                            <div class="mui-slider-indicator">
                                ${upCri(good.pic.length)}
                            </div>
                </div>
            </li>
            <li class="mui-table-view-cell">
                <sapn>${good.proName}</sapn>
            </li>
            <li class="mui-table-view-cell">
                <sapn class="price-title">价格:</sapn>
                <sapn class="price">￥ ${good.price}</sapn>
                <del class="price-old">￥ ${good.oldPrice}</del>
            </li>
            <li class="mui-table-view-cell btns">
                <button class="btns_title" disabled="disabled"><span>尺码:</span></button>
                ${upBtn(good.productSize, good.size)}
            </li>
            <li class="mui-table-view-cell btns">
                <sapn>数量:</sapn>
                <div class="mui-numbox" data-numbox-min="0" data-numbox-max="${good.productNum}">
                    <button class="mui-btn mui-numbox-btn-minus" type="button" id="numBox">-</button>
                    <input class="mui-numbox-input" type="number" value="${good.num}"/>
                    <button class="mui-btn mui-numbox-btn-plus" type="button" id="numBox">+</button>
                </div>
                <sapn>库存:${good.productNum}</sapn>
            </li>
            <li class="mui-table-view-cell">
                <button type="button" class="mui-btn-warning mui-pull-right" id="update">修改</button>
                <button type="button" class="mui-btn-primary mui-pull-right" id="buy">购买</button>
            </li>
    `
    $('#good').html(str)
    mui('.mui-numbox').numbox()

    //点击选择或取消尺码
    $(document).on('tap', '#numBtn', (e) => {
        let goodCurrent = JSON.parse(localStorage.getItem('goodUpdate'))
        let className = '.numBtn' + goodCurrent.size
        if (goodCurrent.size != 0) {
            $(className).removeClass('btn_bc')
        }
        goodCurrent.size = e.currentTarget.dataset.id
        localStorage.setItem('goodUpdate', JSON.stringify(goodCurrent))
        className = '.numBtn' + goodCurrent.size
        $(className).addClass('btn_bc')

    })

    //点击更新本地num
    $(document).on('tap', '#numBox', () => {
        let goodCurrent = JSON.parse(localStorage.getItem('goodUpdate'))
        goodCurrent.num = mui('.mui-numbox').numbox().getValue()
        localStorage.setItem('goodUpdate', JSON.stringify(goodCurrent))
    })
}
//动态加载轮播图图片
function upPic(pic) {
    let str = ``
    str += `<!--支持循环，需要重复图片节点-->
            <div class="mui-slider-item mui-slider-item-duplicate"><img
                src="${pic[pic.length - 1].picAddr}" />
            </div>`
    for (let p in pic) {
        str += `<div class="mui-slider-item"><img src="${pic[p].picAddr}" /></div>`
    }
    str += `<!--支持循环，需要重复图片节点-->
            <div class="mui-slider-item mui-slider-item-duplicate"><img
                        src="${pic[0].picAddr}" />
            </div>`
    return str
}

//动态加载轮播图圆点
function upCri(num) {
    if (num === 1) {
        return
    }
    let str = `<div class="mui-indicator mui-active"></div>`
    for (let n in (num - 1)) {
        str += `<div class="mui-indicator"></div>`
    }
    return str
}

//动态加载尺码大小按钮
function upBtn(goodSize, checked) {
    console.log(checked)
    goodSize = JSON.stringify(goodSize)
    let arr = goodSize.slice(1, goodSize.length - 1).split('-')
    if (arr.length !== 2) {
        return '无相关尺寸'
    }
    let str = ``
    let min = parseInt(arr[0])
    let max = parseInt(arr[1])
    for (let j = min; j <= max; j++) {
        str += `
            <button class="numBtn${j} ${parseInt(checked) == j ? 'btn_bc' : ''}" data-id="${j}" id="numBtn">${j}</button>
        `
    }
    return str
}

// //判断当前商品是否已加入购物车
// function shoppingIsInCar(good) {
//     //获取本地购物车
//     let shopCar = JSON.parse(localStorage.getItem('shopCar')) || []
//     if (shopCar.length === 0) {
//         return ''
//     }
//     for (let s in shopCar) {
//         if (shopCar[s].id === good.id) {
//             return ' span_active'
//         }
//     }
// }

//更新购物车商品信息
$(document).on('tap', '#update', () => {
    let good = JSON.parse(localStorage.getItem('goodUpdate'))
    $.ajax({
        type: 'POST',
        url: '/cart/updateCart',
        data: {
            id: good.id,
            size: parseInt(good.size),
            num: good.num
        },
        success: (result) => {
            if (result.success) {
                mui.toast('更新成功')
                window.location.replace('/shoppingCar')
            } else {
                mui.toast('网络不佳!')
            }
        }
    })
})

//购买购物车商品
$(document).on('tap', '#buy', () => {
    mui.alert('<img src="/mobile/images/微信图片_20220714174605.jpg" width="248px" height="336px">', '打钱', () => {
        return
    })
})